<!---->
<template>
  <div>
    <tabNav :category="category" v-if="category" @handleSelect="getBlogByCagtegory"></tabNav>
    <div class="content">
      <div class="ml" v-if="blogList.length">
        <div class="blogList">
          <div
            class="line"
            v-for="item in blogList"
            :key="'a'+item.id"
            @click="goDetail(item)"
          >
            <div class="center">
              <el-image
                style="width: 100px; height: 100px"
                :src="item.imgPath"
                fit="contain"
              ></el-image>
            </div>
            <div class="bl">
              <div class="btitle">{{ item.title }}</div>
              <div class="bdr">{{ item.content | ellipsis }}</div>
            </div>
            <div class="br">
              <div class="ct">
                <div>作者：{{ item.author }}</div>
                <div>{{ item.createtime }}</div>
              </div>
            </div>
          </div>
        </div>
        <div class="page">
          <el-pagination
            background
            layout="prev, page, next"
            :total="pageData.pageCount"
            :page-size="pageData.pageSize"
            :current-page="pageData.currenPage"
            @current-change="handPage"
          >
          </el-pagination>
        </div>
      </div>
      <div class="ml" v-else>
        <el-empty :image-size="200"></el-empty>
      </div>
      <div class="mr">
        <div class="mrt" v-if="commBlog.length">
          <h3>优质推荐</h3>
          <hr />
          <div class="tjList">
            <div
              class="line"
              v-for="item in commBlog"
              :key="item.id"
              @click="goDetail(item)"
            >
              <div class="center">
                <el-image
                  style="width: 100px; height: 100px"
                  src="url"
                  fit="contain"
                ></el-image>
              </div>
              <div class="bl">
                <div class="btitle">{{ item.title }}</div>
                <div class="bdr">{{ item.content | ellipsis }}</div>
              </div>
              <div class="br">
                <div class="ct">
                  <div>作者：{{ item.author }}</div>
                  <div>{{ item.createtime }}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="about">
          <div>团队成员组成</div>
          <div>莫文聪、莫文娣、刘咏璇、汤颖琪、黄鑫、陈一阳</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import<组件名字> from '<组件路径>';
import page from "@/components/page.vue";
import tabNav from "@/components/nav.vue";
export default {
  //过滤器，超过多少显示省略号
  filters: {
    ellipsis(value) {
      if (!value) return "";
      if (value.length > 8) {
        return value.slice(0, 8) + "...";
      }
      return value;
    },
  },
  //import引入的组件需要注入对象中才能用
  components: {
    page: page,
    tabNav: tabNav,
  },
  data() {
    return {
      username: "103宿舍",
      BpostData: {
        createTime: "all",
        blogTitle: "all",
        author: "all",
        pageNo: 1,
        pageSize: 5,
        status: 3,
      },
      CpostData: {
        pageNo: "1",
        pageSize: "5",
        categroy: "allin",
      },
      blogList: [],
      category: [],
      commBlog: [],
      pageData: {},
    };
  },
  //监听属性 类似于data概念
  computed: {
    tabData() {
      return this.$store.state.tabData||[];
    },
    page() {
      return this.$store.state.pageData||{};
    },
  },
  //监控data中的数据变化
  watch: {
    blogList(newValue,oldValue){
      this.$store.commit("setTabData", this.blogList);
      console.log("数据改变",this.tabData)
    }
  },
  //方法集合
  methods: {
    handPage(value) {
      this.BpostData.pageNo = value;
      this.getBlogList(this.BpostData);
    },
    getList() {
      let p1 = this.API.getCategoryList(this.CpostData);
      let p2 = this.API.getCommBlog({ recommend: 1 });
      Promise.all([p1, p2]).then((res) => {
        console.log("请求返回", res);
        res.map((item, i) => {
          if (item.message.code == 200) {
            this.category = res[0].data.pageData || [];
            this.commBlog = res[1].data.pageData || [];
          }
        });
      });
    },
    getBlogList(item) {
      this.API.getBlogList(item).then((res) => {
        if (res.message.code == 200) {
          this.blogList = res.data.pageData || [];
          const { currenPage, hasNext, hasPre, pageCount, pageSize } = res.data;
          this.pageData.currenPage = currenPage;
          this.pageData.hasNext = hasNext;
          this.pageData.hasPre = hasPre;
          this.pageData.pageCount = pageCount;
          this.pageData.pageSize = pageSize;
          this.$store.commit("setPageData", this.pageData);
          this.$store.commit("setTabData", this.blogList);
          this.$forceUpdate()
        }
      });
    },
    goDetail(item) {
      this.$router.push({
        name: "Detail",
        query: item,
      });
    },
    getBlogByCagtegory(categoryname) {
      if(categoryname=='全部'){
        this.getBlogList(this.BpostData);
      }else{
          this.API.getBlogListByCategory({ categoryname: categoryname }).then(
        (res) => {
          if (res.message.code == 200) {
            this.blogList = res.data.pageData || [];
            const { currenPage, hasNext, hasPre, pageCount, pageSize } =
              res.data;
            this.pageData.currenPage = currenPage;
            this.pageData.hasNext = hasNext;
            this.pageData.hasPre = hasPre;
            this.pageData.pageCount = pageCount;
            this.pageData.pageSize = pageSize;
            this.$store.commit("setPageData", this.pageData);
            this.$store.commit("setTabData", this.blogList);
            this.$forceUpdate()
          }
        }
      );
      }
      
      console.log("是否拿过来", categoryname);
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    console.log("尽力啊");
  },
  //生命周期-挂载完成（可以访问DOM元素）
  mounted() {
    this.$nextTick(()=>{
      this.getList();
    this.getBlogList(this.BpostData);
    console.log("hhhh",this.blogList)
    })
    
  },
  beforeCreate() {}, //生命周期-创建之前
  beforeMount() {}, //生命周期-挂载之前
  beforeUpdate() {}, //生命周期-更新之前
  updated() {}, //生命周期-更新之后
  beforeDestroy() {}, //生命周期-销毁之前
  destroyed() {}, //生命周期-销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个会输会触发
};
</script>
<style lang='less' scoped>
//@import url(); 引入公共css类
.page {
  margin-top: 20px;
  text-align: center;
}
.content {
  display: flex;
  .ml {
    flex: 1;
    margin-right: 20px;
    //   border:1px solid #ccc;
    .blogList {
      display: flex;
      flex-direction: column;
      .line:hover {
        background: #f8f9fa;
      }
      .line {
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid #ccc;
        padding: 15px;
        cursor: pointer;
        .center {
          width: 120px;
        }
        .bl {
          display: flex;
          flex-direction: column;
          // justify-content: flex-start;
          // align-items: center;
          flex: 1;
          .btitle {
          }
          .bdr {
            color: #ccc;
            margin: 10px 0;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
        }
        .br {
          .ct {
            line-height: 30px;
            color: #ccc;
          }
        }
      }
    }
  }
  .mr {
    width: 30%;
    border: 1px solid #ccc;
    margin-left: 20px;
    .mrt {
      text-align: center;
    }
    .tjList {
      .line {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px;
        cursor: pointer;
        .center {
          width: 120px;
        }
        .bl {
          display: flex;
          flex-direction: column;
          // flex:1;
          // justify-content: center;
          align-items: flex-start;
          font-size: 14px;
          .btitle {
          }
          .bdr {
            color: #ccc;
            margin: 10px 0;
          }
        }
        .br {
          font-size: 14px;
          .ct {
            line-height: 30px;
            color: #ccc;
          }
        }
      }
    }
    .about {
      text-align: center;
      margin: 10px 0 30px 0;
      line-height: 30px;
    }
  }
}
</style>